<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>harmonii.us</title>
		<link rel="stylesheet" href="css/styles.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
		<script src="js/harmoniimobile.js" type="text/javascript"></script>
		<meta name = "viewport" content = "width = device-width">
		<meta name="apple-mobile-web-app-capable" content="yes" />
	</head>

	<body>
		<div id="header">	
			<p><img id="logo" src="img/harmoniius_logo.png" alt="harmonii.us logo" /></p>
		</div>
		
		<div id="session-name">
			<h1>John's Session</h1>
		</div>

		<div id="main">
			<!-- Voting choices -->
			<div id="voting-choices" class="section">
				<h1>Vote For Next Song</h1>
				<p id="timer">Time left: <span id="time">10</span></p>

				<!-- Song choices for next song goes here -->
			</div>

			<!-- Now playing -->
			<div id="now-playing" class="section">
				<h1>Now Playing</h1>
				<div id="album-art"></div>
				<!-- Information on song playing now goes here -->
			</div>
			
			<div id="voting-results" class="section">
				<h1>Results For Previous Round</h1>
				<!-- Results of voting goes here -->
				<div id="first" class="subsection">
					<p class="ranking">1st</p>
				</div>
				<div id="second" class="subsection">
					<p class="ranking">2nd</p>
				</div>
				<div id="third" class="subsection">
					<p class="ranking">3rd</p>
				</div>
			</div>
		</div>

		<div id="footer">
			<img src="img/poweredbyemusic_155x30_w.png" />
		</div>
		
	</body>
</html>